<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业3-页面还原</title>
    <style>
        .xc {
            width: 500px;
            height: 700px;

            display: flex;
            flex-direction: column;

            /* 水平居中 */
            align-items: center;
        }

        .header {
            height: 100px;
        }

        .main {
            flex-direction: column;
            align-items: center;

            height: 620px;
        }

        .box {
            display: flex;
            flex-direction: row;
            border-radius: 10px;
            width: 480px;
            height: 100px;
            margin-top: 10px;
            margin-bottom: 10px;
        }

        .left {
            width: 160px;
            display: flex;
            flex-direction: column;
        }

        .middle {
            width: 160px;
            display: flex;
            flex-direction: column;
        }

        .right {
            width: 160px;
            display: flex;
            flex-direction: column;
        }

        .item1 {
            flex: 1;
            width: 160px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            border: 1px solid white;
        }

        .box1 {
            margin-top: 20px;
            background-color: #db7093;
        }

        .box2 {
            background-color: #1d8fdb;
        }

        .box3 {
            background-color: #008000;
        }

        .box4 {
            margin-bottom: 20px;
            background-color: #ffa500;
        }

        .box5 {
            display: flex;
            width: 480px;
            height: 100px;
            margin-bottom: 20px;
            background-color: #ffffff;
        }

        .footer {
            display: flex;
            width: 500px;
            padding-top: 20px;
            border-top: 1px solid #ccc;
        }

        .item2 {
            flex: 1;
            text-align: center;
        }


    </style>
</head>

<body>
    <div class="xc">
        <div class="header">
            <img src="../img/banner.jpg" alt="tuxing" width="500">
        </div>

        <div class="main">
            <div class="box1 box">
                <div class="left">
                    <span></span>
                    <span></span>
                </div>
                <div class="middle">
                    <span class="item1">首页</span>
                    <span class="item1">携程旅游</span>
                </div>
                <div class="right">
                    <span class="item1">联系我们</span>
                    <span class="item1">关于我们</span>
                </div>
            </div>
            <div class="box2 box">
                <div class="left">
                    <span></span>
                    <span></span>
                </div>
                <div class="middle">
                    <span class="item1">首页</span>
                    <span class="item1">携程旅游</span>
                </div>
                <div class="right">
                    <span class="item1">联系我们</span>
                    <span class="item1">关于我们</span>
                </div>
            </div>
            <div class="box3 box">
                <div class="left">
                    <span></span>
                    <span></span>
                </div>
                <div class="middle">
                    <span class="item1">首页</span>
                    <span class="item1">携程旅游</span>
                </div>
                <div class="right">
                    <span class="item1">联系我们</span>
                    <span class="item1">关于我们</span>
                </div>
            </div>
            <div class="box4 box">
                <div class="left">
                    <span class="item1">首页</span>
                    <span class="item1">携程旅游</span>
                </div>
                <div class="middle">
                    <span class="item1">首页</span>
                    <span class="item1">携程旅游</span>
                </div>
                <div class="right">
                    <span class="item1">联系我们</span>
                    <span class="item1">关于我们</span>
                </div>
            </div>
            <div class="box5">
                <img src="../img/extra_1.png" width="240px" height="100px">
                <img src="../img/extra_2.png" width="240px" height="100px">
            </div>
        </div>
        <div class="footer">
            <div class="item2">
                <a href="www.baidu.com">联系我们</a>
            </div>
            <div class="item2">
                <a href="www.baidu.com">联系我们</a>
            </div>
            <div class="item2">
                <a href="www.baidu.com">联系我们</a>
            </div>        
            
        </div>
    </div>
</body>

</html>